<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>month</title>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="main" style="width: auto;height: 800px">

</div>

<script>
    $(function () {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        $.getJSON("/time/month",function (values){
            var option;
            var hourdata = [];
            var PM2_5 = [];
            var PM10 = [];
            var SO2 = [];
            var NO2 = [];
            var O3 = [];
            var CO = [];

            for(var i = 1;i < 13;i++){
                hourdata.push(i+"月")
            }
            for(var i = 0;i < values.length; i++){
                if(values[i]["type"] == "PM2.5")
                    PM2_5.push(values[i]["average"])
                else if(values[i]["type"] == "PM10")
                    PM10.push(values[i]["average"])
                else if(values[i]["type"] == "SO2")
                    SO2.push(values[i]["average"])
                else if(values[i]["type"] == "NO2")
                    NO2.push(values[i]["average"])
                else if(values[i]["type"] == "O3")
                    O3.push(values[i]["average"])
                else if(values[i]["type"] == "CO")
                    CO.push(values[i]["average"])
            }

            console.log(PM10)

            option = {
                title: {
                    text: '污染源随时间的变化'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['PM2.5', 'PM10', 'SO2', 'NO2', 'O3','CO']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: hourdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'PM2.5',
                        type: 'line',
                        smooth: true,
                        data: PM2_5
                    },
                    {
                        name: 'PM10',
                        type: 'line',
                        smooth: true,
                        data: PM10

                    },
                    {
                        name: 'SO2',
                        type: 'line',
                        smooth: true,
                        data: SO2
                    },
                    {
                        name: 'NO2',
                        type: 'line',
                        smooth: true,
                        data: NO2
                    },
                    {
                        name: 'O3',
                        type: 'line',
                        smooth: true,
                        data: O3
                    },
                    {
                        name: 'CO',
                        type: 'line',
                        smooth: true,
                        data: CO
                    }
                ]
            };

            option && myChart.setOption(option);
        })
    })
</script>
</body>
</html>